<!DOCTYPE HTML>
<html style="background-color:#c5c5c5;width:100%;height:100%">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>StudentFamilyMessage</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/pair.css" />
    <link rel="stylesheet" type="text/css" href="../../css/font-awesome.css" />
</head>
<style media="screen">
    .personname {
        position: relative;
        width: 90%;
        margin: 0 auto;
        height: 1.2rem;
        /*margin-top: 0.25rem;*/
        padding-top: 0;
        padding-bottom: 0.05rem;
        font-size: 0.8rem;
        box-sizing: border-box;
        margin-top: 0.2rem;
        border-bottom: 0.075rem solid #c8c8c8;
        padding-left: 0.25rem;

    }

    .personname .left_icon {
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        left: 0.25rem;
    }

    .personname .center_text {
        position: absolute;
        width: 80%;
        height: 1.2rem;
        text-align: center;
        left: 1.5rem;
    }

    .personname .right_icon {
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        right: 0rem;
    }

    .bianji {
        margin-left: 0.25rem;
        width: 1.2rem;
        height: 1.2rem;
    }

    .neirong {
        width: 80%;
        height: 1rem;
        left: 1.5rem;
        line-height: 0.5rem;
        text-align: center;
    }

    .shanchu {
        margin-right: 0.25rem;
        width: 1.2rem;
        height: 1.2rem;
    }

    #newalert {
        position: absolute;
        width: 300px;
        height: 380px;
        left: 50px;
        top: 50px;
        z-index: 100;
        background-color: #fff;
        border-radius: 25px;
    }

    .title {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px #CCCCCC solid;
        text-align: center;
        font-size: 16px;
    }

    .newitem {
        position: relative;
        height: 40px;
        border-bottom: 1px #CCCCCC solid;
        font-size: 14px;
    }

    .newitem_text {
        position: absolute;
        height: 40px;
        width: 80px;
        line-height: 40px;
        left: 5px;
        text-align: left;
    }

    .newitem_input {
        position: absolute;
        left: 95px;
        height: 40px;
        line-height: 40px;
        width: 400px;
    }

    .submit {
        height: 50px;

    }

    .btn {
        width: 150px;
        height: 50px;
        background-color: #00BCD4;
        left: 50%;
        margin-left: -75px;
        text-align: center;
    }

    #block {
        background-color: #000;
        opacity: 0.7;
        /* ie兼容 */
        filter: alpha(opacity=75);
        height: 1000px;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99;
    }
</style>

<body style="background-color:#c5c5c5;width:100%;height:100%">
    <header class="aui-bar aui-bar-nav" style="background-color:white;height:2.5rem;padding-top:0.6rem">
        <a class="aui-pull-left aui-btn" onclick="api.closeWin()">
            <i style="color:black" class="fa fa-chevron-left" aria-hidden="true"></i>
        </a>
        <div class="aui-title" style="color:black">学生家庭信息</div>
        <a class="aui-pull-right">
            <span>
                <img src="../../image/321AC.png" style="padding-top:0.25rem">
            </span>
        </a>
    </header>

    <div class="topview">
        <div class="add" @click="add()"><img style="width:2.25rem;height:2.25rem" src="../../image/add6.png"></div>
        <image class="headimage" src="../../image/head2.jpg"></image>
        <div class="name">{{name}}</div>
    </div>
    <div class="bottom" v-for="item in student" style="margin-bottom:0.75rem">
        <div class="item">
            <div class="personname">
                <div class="left_icon" @click="edit($index)"><img style="width:0.9rem;height:0.9rem" src="../../icon/fedit.png"></div>
                <div class="center_text">{{item.relation.itemValue}}：{{item.name}}</div>
                <div class="right_icon" @click="delete1($index)"><img style="width:0.9rem;height:0.9rem" src="../../icon/delete.png"></div>
            </div>
            <div class="persondata">族别：{{item.nation.itemValue}}</div>
            <div class="persondata">政治面貌：{{item.fzzmm}}</div>
            <div class="persondata">从事工作：{{item.work}}</div>
            <div class="persondata">工作单位：{{item.workAddr}}</div>
            <div class="persondata" style="margin-top:0.75rem;">联系方式：{{item.phone}}</div>
        </div>
    </div>
</body>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue1.0.js"></script>
<script type="text/javascript" src="../../script/util.js"></script>
<script type="text/javascript">
    apiready = function () {

        vm = new Vue(vueConfig);

        function baohan(arr, item) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == item) {
                    return true;
                }
                return false;
            };
        }
    }

    function alertBox() {
        // 获取页面高度
        var sHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        var sWidth = document.documentElement.scrollWidth || document.body.body.scrollWidth;
        //可视区域的高度
        var wHeight = document.documentElement.clientHeight || document.body.clientHeight;

        //  创建节点
        var block = document.createElement("div");
        block.id = "block";
        block.style.height = sHeight + "px";
        block.style.width = sWidth + "px";
        document.body.appendChild(block);
        var newalert = document.createElement("div");
        newalert.id = "newalert";
        newalert.innerHTML =
            "<div class='title'>编辑家庭人员信息</div><div class='newitem'><div class='newitem_text'>家庭关系</div><input id='relation' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' value='" +
            family_relation +
            "' ></div><div class='newitem'><div class='newitem_text'>姓名</div><input id='name' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' value='" +
            family_name +
            "' ></div><div class='newitem'><div class='newitem_text'>族别</div><input id='nation' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' readonly value='" +
            family_nation +
            "'></div> <div class='newitem'><div class='newitem_text'>政治面貌</div><input id='fzzmm' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' value='" +
            family_fzzmm +
            "'></div> <div class='newitem'><div class='newitem_text'>从事工作</div><input id='work' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' value='" +
            family_work +
            "'></div><div class='newitem'><div class='newitem_text'>工作单位</div><input id='workAddr' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' value='" +
            family_workAddr +
            "' ></div><div class='newitem'><div class='newitem_text'>联系方式</div><input id='phone' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' value='" +
            family_phone +
            "'></div><div class='submit'><button id='tijiao' class='aui-btn aui-btn-primary aui-btn-block btn' style='color:white'>提交</button></div>"
        document.body.appendChild(newalert);
        //获取newalert的高度和宽度
        var dHeight = newalert.offsetHeight;
        var dWidth = newalert.offsetWidth;
        newalert.style.left = (sWidth - dWidth) / 2 + "px";
        newalert.style.top = (wHeight - dHeight) / 2 + "px";

        //点击遮罩层以外消失
        block.onclick = function () {
            document.body.removeChild(block);
            document.body.removeChild(newalert)
        }
    }


    vueConfig = {
        el: "body",
        data: {
            student: [],
            oid: -1,
            name: "",
            family_relation: "",
            family_name: "",
            family_nation: "",
            family_fzzmm: "",
            family_work: "",
            family_workAddr: "",
            family_phone: "",
            nation: [],
            relations: ["父亲", "母亲", "爷爷", "奶奶", "外公", "外婆", "哥哥", "弟弟", "姐姐", "妹妹", "其他"]
        },
        methods: {
            //增加家庭人员信息
            add: function () {
                var me = this;

                var sHeight = document.documentElement.scrollHeight;
                var sWidth = document.documentElement.scrollWidth;
                //可视区域的高度
                var wHeight = document.documentElement.clientHeight;
                //  创建节点
                var block = document.createElement("div");
                block.id = "block";
                block.style.height = sHeight + "px";
                block.style.width = sWidth + "px";
                document.body.appendChild(block);
                var newalert = document.createElement("div");
                newalert.id = "newalert";
                newalert.innerHTML =
                    "<div class='title'>新增家庭人员信息</div><div class='newitem'><div class='newitem_text'>家庭关系</div><input id='relation' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' v-model=\"family_relation \" ></div><div class='newitem'><div class='newitem_text'>姓名</div><input id='name' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px'v-model=\"family_name \"></div><div class='newitem'><div class='newitem_text'>族别</div><input id='nation' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px'  v-model=\"family_nation \"></div> <div class='newitem'><div class='newitem_text'>政治面貌</div><input id='fzzmm' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' v-model=\"family_fzzmm \"></div> <div class='newitem'><div class='newitem_text'>从事工作</div><input id='work' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' v-model=\"family_work \"></div><div class='newitem'><div class='newitem_text'>工作单位</div><input id='workAddr' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' v-model=\"family_workAddr \" ></div><div class='newitem'><div class='newitem_text'>联系方式</div><input id='phone' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' v-model=\"family_phone \"></div><div class='submit'><button id='tijiao' class='btn' style='color:white'>提交</button></div>"
                document.body.appendChild(newalert);
                //获取newalert的高度和宽度
                var dHeight = newalert.offsetHeight;
                var dWidth = newalert.offsetWidth;
                newalert.style.left = (sWidth - dWidth) / 2 + "px";
                newalert.style.top = (wHeight - dHeight) / 2 + "px";

                //点击族别按钮
                var select = document.getElementById('nation');
                select.onclick = function () {
                    api.actionSheet({
                        title: '选择民族',
                        cancelTitle: '取消',
                        // destructiveTitle: '红色警告按钮',
                        buttons: me.nation
                    }, function (ret, err) {
                        var index = ret.buttonIndex;
                        if (index == 57) {
                            document.getElementById("nation").value = family_nation
                        } else {
                            document.getElementById("nation").value = me.nation[index - 1];
                        }
                    });
                }

                //点击家庭按钮
                var select1 = document.getElementById('relation');
                select1.onclick = function () {
                    api.actionSheet({
                        title: '选择家庭关系',
                        cancelTitle: '取消',
                        // destructiveTitle: '红色警告按钮',
                        buttons: me.relations
                    }, function (ret, err) {
                        var index = ret.buttonIndex;
                        if (index == 12) {
                            document.getElementById("relation").value = family_relation
                        } else {
                            document.getElementById("relation").value = me.relations[index - 1];
                        }
                    });
                }

                //点击遮罩层以外消失
                block.onclick = function () {
                    document.body.removeChild(block);
                    document.body.removeChild(newalert)
                }
                //传数据
                var tijiao = document.getElementById("tijiao");
                tijiao.onclick = function () {
                    api.ajax({
                        url: serverIp + "/friend/addfamilymemberStudent.do",
                        method: 'post',
                        data: {
                            values: {
                                oid: me.oid,
                                family_relation: document.getElementById("relation").value,
                                family_name: document.getElementById("name").value,
                                family_nation: document.getElementById("nation").value,
                                family_fzzmm: document.getElementById("fzzmm").value,
                                family_work: document.getElementById("work").value,
                                family_workAddr: document.getElementById("workAddr").value,
                                family_phone: document.getElementById("phone").value
                            }
                        }
                    }, function (ret, err) {
                        if (ret) {
                            alert("增加成功");
                            document.body.removeChild(block);
                            document.body.removeChild(newalert);
                            // alert(JSON.stringify(ret));
                            me.get();
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                }

            },
            //编辑家庭人员信息
            edit: function (index) {
                var me = this;

                family_relation = me.student[index].relation.itemValue;
                family_name = me.student[index].name;
                family_nation = me.student[index].nation.itemValue;
                family_fzzmm = me.student[index].fzzmm;
                if (family_fzzmm == null) {
                    family_fzzmm = "";
                }
                family_work = me.student[index].work;
                family_workAddr = me.student[index].workAddr;
                family_phone = me.student[index].phone;

                // 获取页面高度
                var sHeight = document.documentElement.scrollHeight;
                var sWidth = document.documentElement.scrollWidth;
                //可视区域的高度
                var wHeight = document.documentElement.clientHeight;
                //  创建节点
                var block = document.createElement("div");
                block.id = "block";
                block.style.height = sHeight + "px";
                block.style.width = sWidth + "px";
                document.body.appendChild(block);
                var newalert = document.createElement("div");
                newalert.id = "newalert";
                newalert.innerHTML =
                    "<div class='title'>编辑家庭人员信息</div><div class='newitem'><div class='newitem_text'>家庭关系</div><input id='relation' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' value='" +
                    family_relation +
                    "' ></div><div class='newitem'><div class='newitem_text'>姓名</div><input id='name' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' value='" +
                    family_name +
                    "' ></div><div class='newitem'><div class='newitem_text'>族别</div><input id='nation' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' readonly value='" +
                    family_nation +
                    "'></div> <div class='newitem'><div class='newitem_text'>政治面貌</div><input id='fzzmm' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' value='" +
                    family_fzzmm +
                    "'></div> <div class='newitem'><div class='newitem_text'>从事工作</div><input id='work' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' value='" +
                    family_work +
                    "'></div><div class='newitem'><div class='newitem_text'>工作单位</div><input id='workAddr' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' value='" +
                    family_workAddr +
                    "' ></div><div class='newitem'><div class='newitem_text'>联系方式</div><input id='phone' type='text' style=' position: absolute;left:85px;height: 40px;line-height: 40px;width: 215px;font-size: 14px' value='" +
                    family_phone +
                    "'></div><div class='submit'><button id='tijiao' class='btn' style='color:white'>提交</button></div>"
                document.body.appendChild(newalert);
                //获取newalert的高度和宽度
                var dHeight = newalert.offsetHeight;
                var dWidth = newalert.offsetWidth;
                newalert.style.left = (sWidth - dWidth) / 2 + "px";
                newalert.style.top = (wHeight - dHeight) / 2 + "px";

                //点击族别按钮
                var select = document.getElementById('nation');
                select.onclick = function () {
                    api.actionSheet({
                        title: '选择民族',
                        cancelTitle: '取消',
                        // destructiveTitle: '红色警告按钮',
                        buttons: me.nation
                    }, function (ret, err) {
                        var index = ret.buttonIndex;
                        if (index == 57) {
                            document.getElementById("nation").value = family_nation
                        } else {
                            document.getElementById("nation").value = me.nation[index - 1];
                        }
                    });
                }

                //点击家庭按钮
                var select1 = document.getElementById('relation');
                select1.onclick = function () {
                    api.actionSheet({
                        title: '选择家庭关系',
                        cancelTitle: '取消',
                        // destructiveTitle: '红色警告按钮',
                        buttons: me.relations
                    }, function (ret, err) {
                        var index = ret.buttonIndex;
                        if (index == 12) {
                            document.getElementById("relation").value = family_relation
                        } else {
                            document.getElementById("relation").value = me.relations[index - 1];
                        }
                    });
                }

                //点击遮罩层以外消失
                block.onclick = function () {
                    document.body.removeChild(block);
                    document.body.removeChild(newalert)
                }
                //传数据
                var tijiao = document.getElementById("tijiao");
                tijiao.onclick = function () {
                    api.ajax({
                        url: serverIp + "/friend/editfamStudent.do",
                        method: 'post',
                        data: {
                            values: {
                                oid: me.student[index].oid,
                                family_relation: document.getElementById("relation").value,
                                family_name: document.getElementById("name").value,
                                family_nation: document.getElementById("nation").value,
                                family_fzzmm: document.getElementById("fzzmm").value,
                                family_work: document.getElementById("work").value,
                                family_workAddr: document.getElementById("workAddr").value,
                                family_phone: document.getElementById("phone").value
                            }
                        }
                    }, function (ret, err) {
                        if (ret) {
                            alert("修改成功");
                            document.body.removeChild(block);
                            document.body.removeChild(newalert);
                            // alert(JSON.stringify(ret));
                            me.get();
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                }

            },
            //删除家庭人员信息
            delete1: function (index) {
                var me = this;
                // console.log(me.student[index].oid);
                var dialogBox = api.require('dialogBox');
                dialogBox.alert({
                    texts: {
                        title: '确认',
                        content: '您正在删除家庭人员信息',
                        leftBtnTitle: '取消',
                        rightBtnTitle: '确认删除'
                    },
                    styles: {
                        bg: '#fff',
                        w: 300,
                        title: {
                            marginT: 20,
                            titleSize: 14,
                            titleColor: '#000'
                        },
                        content: {
                            color: '#000',
                            size: 14
                        },
                        left: {
                            marginB: 7,
                            marginL: 20,
                            w: 130,
                            h: 35,
                            corner: 2,
                            bg: '#fff',
                            size: 12
                        },
                        right: {
                            marginB: 7,
                            marginL: 10,
                            w: 130,
                            h: 35,
                            corner: 2,
                            bg: 'blue',
                            size: 12
                        }
                    }
                }, function (ret) {
                    if (ret.eventType == 'right') {
                        api.ajax({
                            url: serverIp + "/friend/deletefamStudent.do",
                            method: 'post',
                            data: {
                                values: {
                                    oid: me.student[index].oid
                                }
                            }
                        }, function (ret, err) {
                            if (ret) {
                                alert("删除成功！");
                                me.get();

                            } else {
                                alert("删除失败！" + JSON.stringify(err));
                            }
                            var dialogBox = api.require('dialogBox');
                            dialogBox.close({
                                dialogName: 'alert'
                            });
                        });

                    }
                    if (ret.eventType == 'left') {
                        var dialogBox = api.require('dialogBox');
                        dialogBox.close({
                            dialogName: 'alert'
                        });
                    }
                });
            },
            get: function () {
                var me = this;
                api.ajax({
                    url: serverIp + "/friend/getfamfromoidStudent.do",
                    method: 'post',
                    data: {
                        values: {
                            oid: me.oid
                        }
                    }
                }, function (ret, err) {
                    if (ret) {
                        me.student = ret.result;
                        // console.log(me.student);
                        me.name = me.student[0].student.name;
                        // alert( JSON.stringify( ret ) );
                    } else {
                        alert(JSON.stringify(err));
                    }
                });

            }

        },
        created: function () {
            var me = this;
            var index = api.pageParam["index"];
            var value = api.getPrefs({
                key: 'students',
                sync: true
            });
            result = JSON.parse(value);
            var newresult = result[index];
            me.oid = newresult.oid;
            console.log(me.oid);
            me.get();

            $api.get(serverIp + "/friend/nationtypeActivity.do", function (ret) {
                if (ret) {
                    // console.log(JSON.stringify(ret));
                    me.nation = ret.data;
                }
                // console.log(me.nation);
            }, 'JSON');
        }

    }
</script>

</html>